<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    1920 * 1080
      指的就是一个屏幕上一共有多少个像素点
      第一个数指的是一行有多少个像素点
      第二个数指的是一列有多少个像素点

    最早时 1物理像素 = 1逻辑像素

    随着技术的发展，相同尺寸的设备上，可以放更多的像素在设备里。那么物理像素点就慢慢变小

    导致相同的大小的元素，在不同设备上表现的形式不同

    因此我们需要设置视口，来达到使用逻辑像素的目的

    iphone6的物理分辨率 750 * 1334  逻辑分辨率为375 * 667

    iphone6 1逻辑像素 是 4个物理像素
      逻辑像素宽度是物理像素的2倍，高度是物理像素的2倍
    
    设计图规范 750 * xxx   640 * xxx

    布局方案1 
      设计图除以2 用px单位
    
    布局方案2 
      引入js （根据视口宽度动态的设置html的字体大小）
      设计图除以100 用rem单位
   -->
</body>
</html>